<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>数据监控平台</title>

    <!-- Bootstrap -->
    <link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- convert css  -->
    <link href="./asset/cover.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <div class="row">

        <div class="col-md-12 middle">
            <h2 class="md-head text-center bg-alp">
                2018年秋季迎新数据监控
                <a class="pull-right btn-refresh" href="#11" style="line-height:1.8em;">刷新</a>
            </h2>
        </div>

        <!-- middle  -->
        <div class="col-md-6 middle">
          <div class="bg-alp" title2="交费人数" style="overflow:hidden">
            <div class="col-xs-6 text-center">
              <div class="lb-jfrs">报到总人数</div>
              <div class="lb-jzrq">(截至25日10:10)</div>
            </div>
            <div class="col-xs-6">
              <div class="text-left">
                <i class="jfrs">1266</i>人
              </div>
            </div>
          </div>

          <div class="clearfix" style="height:.8em"></div>

          <div class="bg-alp clearfix" title2="系部报到人数柱形图统计">
              <div class="text-left">院系</div>
              <div id="ec_xb_rs" style=" height:250px;"></div>
          </div>
          
          <div class="clearfix" style="height:.8em"></div>

          <div class="bg-alp clearfix" title2="按班级、性别饼图统计">
            <div class="text-left">专业类别</div>
            <div id="ec_zy" style=" height:240px;"></div>
          </div>

        </div>
        <!--/middle  -->

        <!-- right  -->
        <div class="col-md-3 right">
          <div class="clearfix" style="height:.8em"></div>
          <div class="bg-alp" title2="内宿外宿饼图统计">
            <div class="text-left">男女生人数</div>
            <div id="ec_zs_neiwai" style="height:100px"></div>
          </div>
          <div class="bg-alp" title2="床位情况统计">
            <div class="text-left">男女剩余床位</div>
            <div id="ec_zs_chuangwei" style="height:200px"></div>
          </div>
          <div class="bg-alp" title2="分宿舍楼统计横条图">
            <div class="text-left">宿舍楼住宿情况</div>
            <div id="ec_zs_lou" style="height:400px"></div>
          </div>
        </div>
        <!--/right  -->


      </div>

      <div class="row">
          
        <!-- 明细统计 -->
        
        <div class="col-md-12">
            <h3>
                <span class="pull-right" style="font-size:16px; font-weight:100;">
                    <button style="display:none" class="btn-default" id="btn-show-way1">按系部</button>
                    <button class="btn-default" id="btn-show-way2">按班级</button>
                </span>
                <span>明细统计</span>
            </h3>
            <table class="table table-bordered table-condensed tbl-way1">
                <thead>
                <tr>
                    <th>系1部</th>
                    <th>专1业</th>
                    <th>人1数 按系部</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Larry</td>
                    <td>the Bird</td>
                </tr>
                <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Larry</td>
                    <td>the Bird</td>
                </tr>
                <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Larry</td>
                    <td>the Bird</td>
                </tr>
                <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Larry</td>
                    <td>the Bird</td>
                </tr>
                </tbody>
            </table>
            <table style="display:none" class="table table-bordered table-condensed tbl-way2">
                <thead>
                <tr>
                    <th>系部2</th>
                    <th>专业2</th>
                    <th>人数2 按班级</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Larry</td>
                    <td>the Bird</td>
                </tr>
                <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Larry</td>
                    <td>the Bird</td>
                </tr>
                <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Larry</td>
                    <td>the Bird</td>
                </tr>
                <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Larry</td>
                    <td>the Bird</td>
                </tr>
                </tbody>
            </table>
            </div>
    
        </div>
        <!-- /明细统计  -->

    </div>


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
    <script src="./asset/echarts.min.js"></script>

  </body>
</html>

<script>
$(function(){

    // 刷新按钮
    $(".btn-refresh").attr("href","/monitor/kaixue/?time=" + Date.parse( new Date())  );

    // 表格查看方式
    $("#btn-show-way1").on('click',function(){
        $(this).hide();
        $("#btn-show-way2").show();
        $(".tbl-way2").hide();
        $(".tbl-way1").show();
    });
    $("#btn-show-way2").on('click',function(){
        $(this).hide();
        $("#btn-show-way1").show();
        $(".tbl-way1").hide();
        $(".tbl-way2").show();
    });

    // 系部人数图表
    var char_xb_rs = echarts.init(document.getElementById('ec_xb_rs'));
    var char_xb_rs_opt = {
      title: {
          show: false,
          text: '系部'
      },
      tooltip: {},
      legend: {
          show: false,
          data: ['人数']
      },
      textStyle: {
          color: 'rgb(255, 255, 255)'
      },
      itemStyle: {
          normal: {
              // 设置扇形的颜色
              color: 'rgba(127,188,96,0.9)',
              shadowBlur: 20,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
      },
      xAxis: {
          axisLine: {
              lineStyle: {
                  color: 'rgb(255,255,255)'
              }
          },
          axisLabel: {
              textStyle: {
                  color : 'rgb(255,255,255)',
                  fontSize: 10 
              }
          },
          data: ["数控系","机械系","汽车系","电气系","信息系","文旅系"]
      },
      yAxis: {
          axisLine: {
              lineStyle: {
                  color: 'rgb(255,255,255)'
              }
          },
          axisLabel: {
              textStyle: {
                  color : 'rgb(255,255,255)',
                  fontSize: 8 
              }
          }
      },
      series: [{
          name: '人数',
          type: 'bar',
          //顶部数字展示pzr  
          itemStyle: {
              normal: {
                  label: {
                      show: true,//是否展示  
                  }
              }
          },  
          data: [5, 20, 36, 10, 10, 20]
      }]
      



    };
    char_xb_rs.setOption(char_xb_rs_opt);

    // 专业统计
    var char_zy = echarts.init(document.getElementById('ec_zy'));
    var char_zy_opt = {

        title : {
            show: false, 
            text: '专业、男女统计',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient:"verticle",
            left : 'left',
            top : 'middle',
            textStyle: {
                color:"#FFF",
            },
            data:['C类','GW类','GS类','G类','Z类','J类']
        },
        calculable : true,
        series : [
            {
                name:'班级类型',
                type:'pie',
                radius : [2, '90%'],
                center : ['40%', '50%'],
                lableLine: {
                    normal: {
                        show: true 
                    },
                    emphasis: {
                        show: true
                    }
                },
                itemStyle: {
                  normal: {
                      label: {
                          show: true,//是否展示  
                          position: 'inside',
                          formatter: '{b} {c}'
                      }
                  }
                }, 
                data:[
                    {value:10, name:'C类'},
                    {value:5, name:'GW类'},
                    {value:15, name:'GS类'},
                    {value:25, name:'G类'},
                    {value:20, name:'Z类'},
                    {value:35, name:'J类'}
                ]
            },
            {
                name:'性别类型',
                type:'pie',
                radius : [2, '40%'],
                center : ['80%', '60%'],
                itemStyle: {
                  normal: {
                      label: {
                          show: true,//是否展示  
                          position: 'inside',
                          formatter: '{b} {c}'
                      }
                  }
                },  
                data:[
                    {value:1100, name:'女'},
                    {value:5000, name:'男'}
                ]
            }
        ]


    };
    char_zy.setOption(char_zy_opt);


    // 内宿外宿饼图统计
    var char_zs_neiwai = echarts.init(document.getElementById('ec_zs_neiwai'));
    var char_zs_neiwai_opt = {

        title : {
            show: false, 
            text: '内外宿统计',
            x:'center',
            textStyle: {
              color: "#FFFFFF",
              fontSize: 12
            }
        },
        color: ['#ca8622', '#bda29a','#6e7074', '#546570'],
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient:"verticle",
            left : 'left',
            top : 'middle',
            textStyle: {
                color:"#FFF",
            },
            data:['内宿生','外宿生']
        },
        calculable : true,
        series : [
            {
                name:'班级类型',
                type:'pie',
                radius : [2, '70%'],
                center : ['60%', '50%'],
                lableLine: {
                    normal: {
                        show: true 
                    },
                    emphasis: {
                        show: true
                    }
                },
                itemStyle: {
                  normal: {
                      label: {
                          show: true,//是否展示  
                          position: 'inside',
                          formatter: '{b} {c}'
                      }
                  }
                }, 
                data:[
                    {value:10, name:'内宿生'},
                    {value:5, name:'外宿生'},
                ]
            }
        ]


    };
    char_zs_neiwai.setOption(char_zs_neiwai_opt);


    // 男女床位情况统计
    var char_zs_chuangwei = echarts.init(document.getElementById('ec_zs_chuangwei'));
    var char_zs_chuangwei_opt = {

      title : {
          show: false, 
          text: '男女床位情况统计',
          x:'center',
          textStyle: {
            color: "#FFFFFF",
            fontSize: 12
          }
      },
      tooltip : {
          trigger: 'axis',
          axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'line'        // 默认为直线，可选为：'line' | 'shadow'
          }
      },
      color:['rgb(255,190,0)','rgb(131,188,92)'],
      barMaxWidth:"40%",
      legend: {
          bottom: 'bottom',
          data: ['已住', '空闲'],
          textStyle:{
            color:"#FFF"
          },
      },
      yAxis:  {
          type: 'value',
          axisLabel: {
              textStyle: {
                  color : 'rgb(255,255,255)',
                  fontSize: 10 
              }
          },
      },
      xAxis: {
          type: 'category',
          axisLabel: {
              textStyle: {
                  color : 'rgb(255,255,255)',
                  fontSize: 10 
              }
          },
          data: ['男生','女生']
      },
      series: [
          {
              name: '已住',
              type: 'bar',
              stack: '总量',
              label: {
                  normal: {
                      show: true,
                      //position: 'insideCenter'
                  }
              },
              data: [320, 302]
          },
          {
              name: '空闲',
              type: 'bar',
              stack: '总量',
              label: {
                  normal: {
                      show: true,
                      //position: 'insideRight'
                  }
              },
              data: [120, 132]
          }
          
      ]


    };
    char_zs_chuangwei.setOption(char_zs_chuangwei_opt);

    // 宿舍楼床位情况统计
    var char_zs_lou = echarts.init(document.getElementById('ec_zs_lou'));
    var char_zs_lou_opt = {

      title : {
          show: false, 
          text: '宿舍楼床位情况统计',
          x:'center',
          textStyle: {
            color: "#FFFFFF",
            fontSize: 12
          }
      },
      tooltip : {
          trigger: 'axis',
          axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'line'        // 默认为直线，可选为：'line' | 'shadow'
          }
      },
      color:['rgb(255,190,0)','rgb(131,188,92)'],
      //barMaxWidth:"40%",
      legend: {
          bottom: 'bottom',
          data: ['已住', '空闲'],
          textStyle:{
            color:"#FFF"
          },
      },
      xAxis:  {
          type: 'value',
          axisLabel: {
              textStyle: {
                  color : 'rgb(255,255,255)',
                  fontSize: 10 
              }
          },
      },
      yAxis: {
          type: 'category',
          axisLabel: {
              textStyle: {
                  color : 'rgb(255,255,255)',
                  fontSize: 10 
              }
          },
          data: ['1栋女生','2栋女生','3栋女生','2栋男生','4栋男生','5栋男生','6栋男生','7栋男生']
      },
      series: [
          {
              name: '已住',
              type: 'bar',
              stack: '总量',
              label: {
                  normal: {
                      show: true
                  }
              },
              data: [320, 102, 320, 402, 52, 66, 123, 30]
          },
          {
              name: '空闲',
              type: 'bar',
              stack: '总量',
              label: {
                  normal: {
                      show: true
                  }
              },
              data: [402, 52, 66, 123, 320, 102, 320,  301]
          }
          
      ]


    };
    char_zs_lou.setOption(char_zs_lou_opt);


});


</script>